<template>
  <div>
    <div style="background-color: white; width: 68vw; margin: auto;">
      <!-- 上方标题 -->
      <div style="border-bottom: 1px solid #e9e9e9; height: 7vh; width: 100%;">
        <span style="font-weight: bold; font-size: 1.1rem; line-height: 7vh; margin-left: 1.5vw;">专利信息</span>
      </div>

      <pdf-preview :pdf-url="ruleForm.pdfPath"></pdf-preview>
    </div>

    <!-- 填写信息 -->
    <div style="background-color: white; width: 68vw; margin: auto; display: flex; flex-direction: column; padding-bottom: 5vh; margin-top: 3vh">
      <div style="flex: 1;">
        <div style="border-bottom: 1px solid #e9e9e9; height: 7vh;">
          <span style="font-weight: bold; font-size: 1.1rem; line-height: 7vh; margin-left: 1.5vw">信息详情</span>
        </div>
        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" style="margin-top: 5vh">
            <el-form-item label="专利名称" prop="title" required>
              <el-input placeholder="请填写专利名称" v-model="ruleForm.title" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="专利类型" prop="patentType" required>
              <el-radio-group v-model="ruleForm.patentType">
                <el-radio label="发明">发明</el-radio>
                <el-radio label="实用新型">实用新型</el-radio>
                <el-radio label="外观设计">外观设计</el-radio>
                <el-radio label="国际专利">国际专利</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="专利状态" prop="patentStatus" required>
              <el-radio-group v-model="ruleForm.patentStatus">
                <el-radio label="已授权">已授权</el-radio>
                <el-radio label="已受理">已受理</el-radio>
                <el-radio label="已申请">已申请</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="专利编号" prop="patentNumber">
              <el-input placeholder="如: xx" v-model="ruleForm.patentNumber" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="专利权人" prop="patentOwner">
              <el-input placeholder="请输入专利权人" v-model="ruleForm.patentOwner" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="授权公告日" prop="authorizationDate">
              <el-date-picker v-model="ruleForm.authorizationDate" type="date" placeholder="选择日期" value-format="x"></el-date-picker>
            </el-form-item>
            <el-form-item label="申请编号" prop="applicationNumber">
              <el-input placeholder="请输入申请编号" v-model="ruleForm.applicationNumber" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="专利申请日" prop="applicationDate">
              <el-date-picker v-model="ruleForm.applicationDate" type="date" placeholder="选择日期" value-format="x"></el-date-picker>
            </el-form-item>
            <el-form-item label="本人排名" prop="authorRank" required>
              <el-select v-model="ruleForm.authorRank">
                <el-option v-for="i in 13" :key="i" :label="i.toString()" :value="i"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联课题" prop="projectId">
              <el-input placeholder="请选择本ndnu-成果所属课题" v-model="ruleForm.projectId" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="作者信息" prop="authorInfo">
              <div style="background-color: #f9f9f9; width: 55vw; height: auto;">
                <ul style="display: flex; list-style-type: none; padding: 0; margin: 0; line-height: 6vh; color: #3f3f3f">
                  <li style="margin-left: 1.5vw">排序</li>
                  <li style="margin-left: 3vw">中文名</li>
                  <li style="margin-left: 3.5vw">作者身份</li>
                  <li style="margin-left: 3.5vw">单位名称</li>
                </ul>
                <div v-for="(author, index) in ruleForm.authorInfo" :key="index" style="margin-top: 1vh; display: flex; align-items: center;">
                  <el-select style="width: 4vw;" v-model="author.rank">
                    <el-option v-for="item in ruleForm.RankOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-input v-model="author.name" style="width: 5vw; margin-left: 1vw"></el-input>
                  <el-select style="width: 5.5vw; margin-left: 1vw" v-model="author.identity">
                    <el-option v-for="item in ruleForm.ShipOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-input placeholder="单位名称" v-model="author.institution" style="width: 15vw; margin-left: 3vw"></el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="备注信息" prop="remarks">
              <el-input type="textarea" :rows="4" placeholder="请输入备注信息" v-model="ruleForm.remarks" style="width: 34vw;"></el-input>
            </el-form-item>
          </el-form>
          <div style="display: flex; justify-content: center; margin-top: 2vh">
            <button @click="submit" class="upload-button" style="width: 10vw;">返 回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from "@/utils/request.js"
import { useRouter, useRoute } from 'vue-router'
import PdfPreview from "@/components/result/PdfPreview.vue";
import {getProjectNameById} from "@/api/result/longitudinalProjects";


const router = useRouter()
const route = useRoute()
const ruleFormRef = ref(null)

const ruleForm = reactive({
  id: null,
  title: '',
  patentType: '',
  patentStatus: '',
  patentNumber: '',
  patentOwner: '',
  authorizationDate: '',
  applicationNumber: '',
  applicationDate: '',
  authorRank: null,
  remarks: '',
  projectId: null,
  authorInfo: [{
    rank: '1',
    name: '',
    identity: '',
    institution: ''
  }],
  pdfUrl: '',
  syncStatus: '',
  RankOptions: [
    { value: '1', label: '1' },
    { value: '2', label: '2' },
    { value: '3', label: '3' },
    { value: '4', label: '4' },
    { value: '5', label: '5' }
  ],
  ShipOptions: [
    { value: '老师', label: '老师' },
    { value: '博士生', label: '博士生' },
    { value: '硕士生', label: '硕士生' },
    { value: '本科生', label: '本科生' },
    { value: '其它', label: '其它' }
  ]
})


// 获取专利详情
const getPatentDetail = async (id) => {
  try {
    const res = await request.get(`/result/patents/getPatentsById/${id}`)
    if (res.code === 200 && res.data) {
      const data = res.data
      Object.keys(data).forEach(key => {
        if (key in ruleForm) {
          ruleForm[key] = data[key]
        }
      })
      // 特别处理 pdfPath
      if (data.pdfPath) {
        ruleForm.pdfPath = data.pdfPath
        console.log('设置了 PDF 路径:', ruleForm.pdfPath)
      }
    }
  } catch (error) {
    console.error('获取专利详情失败:', error)
    ElMessage.error('获取专利信息失败')
  }
}

onMounted(async () => {
  const patentId = route.query.id;
  if (patentId) {

    // 获取专利详情
    await getPatentDetail(patentId);

  }
});


const addAuthor = () => {
  ruleForm.authorInfo.push({
    rank: '',
    name: '',
    identity: '',
    institution: ''
  })
}

const removeAuthor = (index) => {
  ruleForm.authorInfo.splice(index, 1)
}

const submit = () => {
  router.push("/result/patents");
}
</script>

<style scoped>
.upload-button {
  color: white;
  height: 3.8vh;
  width: 6.5vw;
  background-color: #00b38a;
  cursor: pointer;
  border: none;
}

.upload-button:hover {
  background-color: #009b77;
}

canvas {
  display: block;
  margin: 0 auto;
  background: white;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  transform-origin: top center;
}
</style>
